import React, { useState } from 'react';
import { getArtList } from './service';
import { Button, Skeleton, Row, Col, Pagination } from 'antd';
import { useRequest } from 'ahooks';
import ArtCard from '@/components/ArtCard';

function Home() {
  const [currentPage, setCurrentPage] = useState(1);
  const [total, setTotal] = useState(9);
  const { data, error, loading } = useRequest(() => getArtList(currentPage), {
    onSuccess: () => {
      setTotal(data.total);
    },
    refreshDeps: [currentPage],
  });
  if (loading) {
    return <Skeleton active />;
  }
  if (error) {
    console.log(error);
  }
  return (
    <div style={{ paddingLeft: 30, paddingRight: 30, display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
      <Row style={{ width: '85%', maxWidth: 900, minHeight: 250 }} gutter={20}>
        {data?.artList.map((item) => (
          <Col key={Math.random()} span={8}>
            <ArtCard cardInfo={item} />
          </Col>
        ))}
      </Row>
      <Pagination
        style={{ marginBottom: 20 }}
        current={currentPage}
        pageSize={9}
        total={total}
        onChange={(page) => {
          setCurrentPage(page);
        }}
      />
    </div>
  );
}

export default Home;
